<template>
  <f7-page
    infinite
    :infinite-distance="50"
    :infinite-preloader="showPreloader"
    @infinite="loadMore"
  >
    <f7-navbar :title="$t('m.exchangeRecord')" back-link=" "></f7-navbar>

    <div class="content-padding margin-t20 my-record">
      <div class="my-card" v-for="(item, index) in logs" :key="index">
        <p>{{$t('m.bbr1')}}：ZOL <span>{{$t('m.bbr4')}}：{{item.money}}</span></p>
        <p>{{$t('m.bbr2')}}：USDT</p>
        <p>{{$t('m.handlingFee')}}：{{item.fee || '0.00'}}USDT</p>
        <p>{{$t('m.bbr3')}}：{{$moment(item.add_time * 1000).format('YYYY-MM-DD HH:mm')}}</p>
      </div>
    </div>
  </f7-page>
</template>

<script>
  import { financeLog } from "../api/home";

  export default {
    name: "bb-exchange-record",
    data() {
      return {
        logs: [],
        logsCount: 0,
        showPreloader: true,
        allowInfinite: true,
        pageItems: {
          type: 5,
          page: 1,
          num: 10
        },
      }
    },
    mounted() {
      this.init();
    },
    methods: {
      init() {
        financeLog(this.pageItems).then(res => {
          this.logs = res.data;
          this.logsCount = Number(res.count);
          this.showPreloader = false;
        })
      },
      loadMore() {
        if (!this.allowInfinite || this.logs.length >= this.logsCount) {
          this.showPreloader = false
          return;
        }
        this.allowInfinite = false;
        this.pageItems.page++
        financeLog(this.pageItems).then(res => {
          this.logs.push(...res.data);
          this.allowInfinite = true;
        })
      },
    }
  }
</script>

<style scoped lang="scss">
  .my-card {
    margin-bottom: $padding20;
  }
  .my-record {
    p {
      color: $color8b;
      padding: 10px 0;
      display: flex;
      justify-content: space-between;
    }
  }
</style>
